<template>
	<div class="newredio">

		<div class="title">
			<h2>推荐电台</h2>
			<div>
				<i class="iconfont icon-shuaxin"></i>
				<p @click="change">获取新内容</p>
			</div>
		</div>

		<div class="line"></div>

		<div class="newradio">
			<template  v-for="(item,index) in hotDjs">
			<div @click="radiodetail(item.id)" v-if="index<6" class="radio" :key="item.id">
				<div class="picUrl_box">
					<img :src="item.picUrl" alt="" />
				</div>
				<p>{{item.name}}</p>
				<span>{{item.copywriter}}</span>
			</div>
			</template>
		</div>

	</div>
</template>

<script>
	export default {
		name: "newredio",
		
		data() {
			return {
				hotDj:[],
				hotDjs:[]
			}
		},
		methods:{
			radiodetail(id){
				this.$router.push({
					name:"show",
					query:{
						ids:id
					}
				})
			},
			change(){
				let lang = Math.floor(Math.random() * (this.hotDj.length - 6));
				this.hotDjs = this.hotDj.slice(lang, lang + 6)
			}
		},
		created() {
			this.$http.get("/dj/hot").then(res => {
				console.log(res.data.djRadios)
				this.hotDj = res.data.djRadios;
				this.hotDjs = res.data.djRadios.slice(0,6)
			})
		}
		
	}
</script>

<style lang="scss" scoped>
	@import "~@/assets/css/common.scss";
	.newredio {
		background: #fff;
		padding: vw(16) vw(16);
		margin: vw(10) 0;
		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 0 vw(16);
			h2 {
				font-size: vw(16);
			}
			div {
				display: flex;
				align-items: center;
				i {
					font-size: vw(14);
					color: #666;
					margin-right: vw(6);
				}
				p {
					font-size: vw(12);
					color: #666;
				}
			}
		}
		.line {
			width: 100%;
			height: vw(1);
			background: #eee;
		}
		.newradio {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin: vw(14) 0;
			.radio {
				width: 48%;
				margin:vw(10) 0 ;
				.picUrl_box {
					width: 100%;
					height: vw(140);
					overflow: hidden;
					img {
						width: 100%;
					}
				}
				p {
					margin: vw(10) 0;
					font-size: vw(14);
					color: #666;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
				span {
					font-size: vw(12);
					color: #999;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp:2;
					-webkit-box-orient: vertical;
				}
			}
		}
	}
</style>